<template>
	<view>
		<u-navbar title="话术分组" bgColor="transparent" :titleStyle="{'color':'#fff'}" leftIconColor="#fff" placeholder
			@leftClick="$tools.switchTab('index/index')">
			<view class="u-nav-slot" slot="right">
				<u-icon name="plus-circle" label="新增分组" labelPos="left" color="#fff" labelColor="#fff" labelSize="14" size="18"
					@click="show = true"></>
				</u-icon>
			</view>
		</u-navbar>
		<scroll-view scroll-y="true" style="height: 88vh;" @scrolltolower="ReachBottom">
			<view class="listBox" v-if="livelist.length>0">
				<view class="pd40 item dfx " v-for="(i,idx) in livelist"
					@click="$tools.navTo(`audioLibrary/audioLibrary?id=${i.id}&name=${i.name}`)">
					<view class="icon1">
						<image src="../../static/img/sort.png" mode=""></image>
					</view>
					<view class="info">
						<view class="title">
							{{i.name}}
						</view>
						<view class="fs28Ci">
							{{i.create_time}}
						</view>
					</view>
					<view class="edit" @click.stop="handelClick(i)">
						<u-icon name="more-dot-fill" size="18"></u-icon>
					</view>
				</view>
			</view>
			<!-- 内容为空 -->
			<u-empty iconColor="#fff" textColor="#fff" marginTop="60" text="暂无话术库分组" v-else mode="order"></u-empty>
		</scroll-view>
		<u-modal :show="show" title="新增话术库分组" @confirm="confirm" @cancel="close" ref="uModal" asyncClose showCancelButton>
			<view class="slot-content" style="width: 100%;">
				<u--form labelPosition="left" :model="formData" labelWidth="120" :rules="rules" ref="uForm">
					<u-form-item label="话术库分组名称:" prop="name" ref="item1">
						<u--input v-model="formData.name" placeholder="请输入话术库分组名称" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				livelist: [],
				bgAudio: null,
				formInline: {
					page: 1,
					limit: 10,
					total: 0
				},
				formData: {
					name: ''
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请输入话术库分组名称',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onShow() {
			this.getData()
		},
		// 监听用户下拉刷新
		onPullDownRefresh() {
			this.getData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			console.log('onReachBottom', this.formInline.total, this.livelist.length);
			if (this.formInline.total > this.livelist.length) {
				this.formInline.page++
				this.getData();
			}
		},
		methods: {
			getData() {
				let params = {
					...this.formInline
				}
				this.$api.groupList(params).then(res => {
					console.log('res', res);
					if (res.code == 200) {
						if (this.formInline.page == 1) {
							this.livelist = res.data.list
						} else {
							this.livelist = this.livelist.concat(res.data.list)
						}
						this.formInline.total = res.data.count

						this.$forceUpdate()
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},
			ReachBottom() {
				console.log('onReachBottom', this.formInline.total, this.livelist.length);
				if (this.formInline.total > this.livelist.length) {
					this.formInline.page++
					this.getData();
				}
			},
			confirm() {
				this.$refs.uForm.validate().then(res => {
					this.show = false
					let params = {
						...this.formData
					}
					this.$api.addGroup(params).then(res => {
						this.$tools.toast(res.msg);
						this.close()
						if (res.code == 200) {
							this.formInline = {
								page: 1,
								limit: 10,
								total: 0
							}
							this.getData()
						}
					})
				})
			},
			close() {
				this.formData = {
					name: '',
					keyword: '',
					oratory: '',
				}
				this.show = false
			},
			handelClick(i) {
				uni.showActionSheet({
					itemList: ['删除该分组'],
					success: (res) => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						switch (res.tapIndex) {
							case 0:
								this.delItem(i)
								break;
						}
					},
					fail(res) {
						console.log(res.errMsg);
					}
				});
			},
			delItem(i) {
				uni.showModal({
					title: '提示',
					content: '确认删除吗？删除后将无法找回',
					success: (r) => {
						if (r.confirm) {
							let params = {
								id: i.id
							}
							this.$api.delGroup(params).then(res => {
								if (res.code == 200) {
									this.formInline = {
										page: 1,
										limit: 10,
										total: 0
									}
									this.getData()
								}
								this.$tools.toast(res.msg);
							})
						} else if (r.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.listBox {
		margin: 30rpx;
		overflow: hidden;
		font-size: 15px;

		.item {
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			justify-content: space-between;
			align-items: center;

			.icon1 {
				width: 60rpx;
				height: 60rpx;
				border-radius: 8px;
				color: #6468ff;
				line-height: 60rpx;
				text-align: center;
				font-family: fantasy;

				image {
					width: 66rpx;
					height: 66rpx;
				}
			}

			.icon {
				height: 45rpx;
				color: #1978fd;
				line-height: 45rpx;
				font-family: fantasy;
				font-size: 17px;
				margin-right: -10rpx;
				font-weight: 500;
			}

			.info {
				line-height: 50rpx;
				font-weight: 600;
				width: 70%;
			}

			.edit {
				transform: rotate(90deg);
			}
		}

		 
	}
</style>